/**
 * 气泡弹框 PopoverItem
 */

 import {Popover} from 'antd';
 import {
  ExclamationCircleOutlined,
} from '@ant-design/icons';
 
 interface PopoverProps {
    value: string,
    label: string,
    title: string,
    content: any,
    iconHidden: boolean
 }
 
 export const PopoverItemLabel = (props: PopoverProps) => {
  const { value, label, title, content, iconHidden } = props;
  
  let title1 = title?title:'加油费说明';
  let content1 = content?content:['无加油费说明'];
  const contentNew = (<div>
  {
    content1.map((item,index)=>{
      return(
        <p key={index}>{ item }</p>
      ) 
    })
  }
  </div>)

     return (
      <div style={{display:'flex'}}>
        <div className="ant-formily-item-label ant-formily-item-item-col-6" style={{justifyContent: 'flex-end'}}>
          <span className="ant-formily-item-asterisk">*</span>
          <div className="ant-formily-item-label-content">
            <label style={{margin:'0 5px'}}>{label}</label>
            {
              iconHidden?
              <></>:<>
                <Popover content={contentNew} title={title1} zIndex='1000'>
                  <ExclamationCircleOutlined />
                </Popover>
              </>
            }
          </div>
          <span className="ant-formily-item-colon">:</span>
        </div>
        <div className="ant-formily-item-control ant-formily-item-item-col-18">
          <div className="ant-formily-item-control-content">
            <div className="ant-formily-item-control-content-component">
              {props?._value}
            </div>
          </div>
        </div>
      </div>
     )
  };

  export default PopoverItemLabel;
 
 